<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      padding: 100px 200px;
    }
  </style>
</head>
<body>
  <h2>
    <input type="checkbox" name="" id="" class="all" />全选
  </h2>
  <ul>
    <li><input type="checkbox" class="item" name="" id="" />手机</li>
    <li><input type="checkbox" class="item" name="" id="" />电脑</li>
    <li><input type="checkbox" class="item" name="" id="" />皮包</li>
  </ul>

  <script>
    var all = document.querySelector('.all')
    var list = document.querySelectorAll('.item')

    all.onclick = function() {
      for(var i = 0; i < list.length; i++) {
        list[i].checked = this.checked
      }
    }

    for(var i = 0; i < list.length; i++) {
      list[i].onclick = function() {
        var flag = true  // 假设 点击我自己的时候让 全选checkbox是选中的

        for(var j = 0; j < list.length; j++) {
          // 如果有任何一个人 的checked是false，则说明 有人没选择
          // 就说明 假设失败
          // if( list[j].checked === false) { 

          if( !list[j].checked ) { 
            flag = false
          }
        }

        all.checked = flag 
      }
    }
  </script>
</body>
</html>